<template>
  <div class="animate">
    <div id="list-demo" class="demo">
      <div class="title">列表的进入/离开过渡</div>
      <a-button-group>
        <a-button @click="add">Add</a-button>
        <a-button @click="remove">Remove</a-button>
      </a-button-group>
      <transition-group name="list" tag="p">
        <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
      </transition-group>
    </div>
    <div id="flip-list-demo" class="demo">
      <div class="title">列表的排序过渡</div>
      <a-button @click="shuffle">Shuffle</a-button>
      <transition-group name="flip-list" tag="ul">
        <li v-for="item in items" :key="item">{{ item }}</li>
      </transition-group>
    </div>
    <div id="list-complete-demo" class="demo">
      <div class="title">列表的进入/离开过渡/列表的排序过渡</div>
      <a-button-group>
        <a-button @click="shuffle">Shuffle</a-button>
        <a-button @click="add">Add</a-button>
        <a-button @click="remove">Remove</a-button>
      </a-button-group>
      <transition-group name="list-complete" tag="p">
        <span v-for="item in items" :key="item" class="list-complete-item">{{ item }}</span>
      </transition-group>
    </div>
    <div id="staggered-list-demo">
      <div class="title">模拟搜索</div>
      <a-input v-model="query" style="width:300px" />
      <transition-group
        name="staggered-fade"
        tag="ol"
        :css="false"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
      >
        <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index">{{ item.msg }}</li>
      </transition-group>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import _, { delay } from "lodash";

// import velocity from "velocity-animate";
// 解决vuter报红问题
const velocity = require("velocity-animate");

@Component({
  components: {},
})
export default class AnimateComponents extends Vue {
  private items: any = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  private nextNum: number = 10;
  private query: string = "";
  private list: any[] = [
    { msg: "Bruce Lee" },
    { msg: "Jackie Chan" },
    { msg: "Chuck Norris" },
    { msg: "Jet Li" },
    { msg: "Kung Fury" },
  ];
  public randomIndex() {
    return Math.floor(Math.random() * this.items.length);
  }
  public add() {
    this.items.splice(this.randomIndex(), 0, this.nextNum++);
  }
  public remove() {
    this.items.splice(this.randomIndex(), 1);
  }
  public shuffle() {
    this.items = _.shuffle(this.items);
  }
  // computed
  get computedList() {
    return this.list.filter((item: any) => {
      return item.msg.toLowerCase().indexOf(this.query.toLowerCase()) !== -1;
    });
  }
  public beforeEnter(el: any) {
    el.style.opacity = 0;
    el.style.height = 0;
  }
  public enter(el: any, done: any) {
    var delay = el.dataset.index * 150;
    setTimeout(function () {
      velocity(el, { opacity: 1, height: "1.6em" }, { complete: done });
    }, delay);
  }
  public leave(el: any, done: any) {
    var delay = el.dataset.index * 150;
    setTimeout(function () {
      velocity(el, { opacity: 0, height: 0 }, { complete: done });
    }, delay);
  }
}
</script>
<style lang="less" scoped>
.animate {
  padding: 20px;
}
.title {
  padding: 20px;
}
p,
ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .list-item,
  span,
  li {
    width: 20px;
    height: 30px;
    margin: 20px;
    text-align: center;
    line-height: 30px;
  }
}

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.flip-list-move {
  transition: transform 1s;
}
.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>